<template>
	<div>
		<jk-table ref="machineTable" :highlight-hover-row="false" :stripe="false" :row-style="rowClassName" :span-method="mergeColMethod" border :data="tableData">
			<vxe-column title="机台" align="left" field="machineName" :width="70"></vxe-column>
			<vxe-column title="品种" align="left" field="productName" :width="170"></vxe-column>
			<!--<vxe-column title="本班表数" align="right" field="startOutputM" :width="130">
				<template slot-scope="scope">
					<jk-number-input v-if="pageType !== 'detail'" v-model="scope.row.startOutputM" size="mini" @change="calItemMachine($event, scope, 'startOutputM')"></jk-number-input>
					<span v-else>{{ scope.row.startOutputM }}</span>
				</template>
			</vxe-column>
			<vxe-column title="上班表数" align="right" field="endOutputM" :width="130">
				<template slot-scope="scope">
					<jk-number-input v-if="pageType !== 'detail'" v-model="scope.row.endOutputM" size="mini" @change="calItemMachine($event, scope, 'endOutputM')"></jk-number-input>
					<span v-else>{{ scope.row.endOutputM }}</span>
				</template>
			</vxe-column>-->
			<vxe-column title="基数" align="right" field="criterion" :width="100"></vxe-column>
			<vxe-column title="10米价" align="right" field="tenPrice" :width="100"></vxe-column>
			<vxe-column title="产量(M)" align="right" field="machineOutputM" :width="100">
				<!--<template slot-scope="scope">
					<jk-number-input v-if="pageType !== 'detail'" v-model="scope.row.machineOutputM" size="mini" @change="calItemMachine($event, scope, 'machineOutputM')"></jk-number-input>
					<span v-else>{{ scope.row.machineOutputM }}</span>
				</template>-->
			</vxe-column>
			<vxe-column title="产量(kg)" align="right" field="machineOutputKg" :width="100"></vxe-column>
			<vxe-column title="产量工资" align="right" field="machineSingleSalary" :width="70"></vxe-column>
			<vxe-column title="人员" align="left" field="empName" :width="70"></vxe-column>
			<!--<vxe-column title="人员产量(M)" align="right" field="empMachineOutputM" :width="100"></vxe-column>-->
			<!--<vxe-column title="人员产量(kg)" align="right" field="empMachineOutputKg" :width="100"></vxe-column>-->
			<!--<vxe-column title="人机工资" align="left" field="empMachineSalary" :width="70"></vxe-column>-->
		</jk-table>
	</div>
</template>
<script>
    import { mathJsAdd, mathJsDiv, mathJsMul, mathJsSub } from '../../../../utils/jk/jk-cals';
    import mergeMixin from '../merge-mixin';
    export default {
        mixins: [mergeMixin],
        props: {
            pageType: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: null
            },
            machineData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                colors: ['#19be6b', '#2d8cf0'],
                lineObj: {},
                tableData: []
            };
        },
        methods: {
            rowClassName({ row }) {
                // return {
                //     backgroundColor: this.lineObj[row.productionLineId].bgColor,
                //     color: '#fff'
                // };
            },
            onMachineOutputKg(e, scope) {
                this.tableData.forEach(x => {
                    if (x.machineId === scope.row.machineId) {
                        if (x.processCode.toUpperCase() === 'SM') {
                            x.empList.forEach(k => {
                                k.machineOutputKg = mathJsDiv(x.machineOutputKg, x.empList.length || 0);
                                k.empMachineSalary = parseFloat(mathJsMul(x.price, mathJsDiv(k.machineOutputKg, x.unit || 0)).toFixed(2));
                            });
                        }
                    }
                });
                this.calProcessTotal(scope.row.processId);
                this.updateData();
            },
            calItemMachine(e, scope, type) {
                let machineNum = 0;
                let bcVal = 0; // 班产
                this.tableData.forEach(x => {
                    if (x.machineId === scope.row.machineId) {
                        machineNum++;
                        this.$set(x, type, e);
                        // this.$set(x, 'machineOutputM', mathJsSub(x.endOutputM, x.startOutputM));
                        const kgVal = mathJsMul(x.machineOutputM, x.criterion).toFixed(2);
                        this.$set(x, 'machineOutputKg', kgVal);
                        this.$set(x, 'machineSingleSalary', parseFloat(mathJsMul(x.machineOutputM / 10, x.tenPrice || 0).toFixed(2)));
                    }
                    if (x.productionLineId && x.productionLineId === scope.row.productionLineId && x.processId === scope.row.processId) {
                        bcVal = mathJsAdd(x.machineOutputKg || 0, bcVal);
                    }
                });

                this.tableData.forEach(x => {
                    if (x.machineId === scope.row.machineId) {
                        this.$set(x, 'empMachineSalary', parseFloat(mathJsDiv(x.machineSingleSalary, machineNum || 0).toFixed(2)));
                        this.$set(x, 'empMachineOutputM', parseFloat(mathJsDiv(x.machineOutputM, machineNum || 0).toFixed(2)));
                        this.$set(x, 'empMachineOutputKg', parseFloat(mathJsDiv(x.machineOutputKg, machineNum || 0).toFixed(2)));
                    }
                });
                this.updateData();
            },
            onPriceValChange(e, scope) {
                this.tableData.forEach(machineItem => {
                    if (machineItem.processId === scope.row.processId) {
                        this.$set(machineItem, 'price', e);
                    }
                });
                this.updateData();
            },
            onUnitValChange(e, scope) {
                this.tableData.forEach(machineItem => {
                    if (machineItem.processId === scope.row.processId) {
                        this.$set(machineItem, 'unit', e);
                    }
                });
                this.updateData();
            },
            updateData() {
                this.$emit('on-update', JSON.parse(JSON.stringify(this.tableData)));
            }
        },
        watch: {
            machineData: {
                handler(newVal) {
                    const cpData = JSON.parse(JSON.stringify(newVal));
                    this.lineObj = {};
                    this.tableData = cpData ? cpData.map(x => {
                        if (!this.lineObj[x.productionLineId]) {
                            idx = 0;
                            this.lineObj[x.productionLineId] = {
                                bgColor: this.colors[idx],
                                productionLineName: x.productionLineName
                            };
                        }
                        return x;
                    }) : [];
                    let idx = 0;
                    for (const item in this.lineObj) {
                        if (idx >= 2) idx = 0;
                        idx++;
                        this.lineObj[item].bgColor = this.colors[idx - 1];
                    }
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
<style scoped lang="scss">
.emp-container {
    box-sizing: border-box;
    .emp-item {
        box-sizing: border-box;
        //border: 1px solid #eee;border-bottom: none;
    }
    .emp-item:last-child {
        //border-bottom: solid 1px #eee;
    }
    .emp-item:hover {
        background: #2d8cf0;
        color: #fff;
    }
}
.emp-container:hover {
    color: #fff;
    .emp-item {
        background: #2d8cf0;
        border-color: #5cadff;
    }
}
</style>
